<template>
    <div class="production-dashboard">
        <!-- 页面标题 -->
        <div class="dashboard-header">
            <h1>生产数据看板</h1>
            <div class="header-actions">
                <el-button @click="refreshData" :loading="loading" type="primary">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    刷新数据
                </el-button>

            </div>
        </div>

        <!-- 工单统计卡片 -->
        <div class="stats-cards ink-painting-container">
            <div class="stat-card ink-painting-card" v-for="stat in orderStats" :key="stat.title">
                <div class="stat-icon" :class="stat.iconClass">
                    <el-icon>
                        <component :is="stat.icon" />
                    </el-icon>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ stat.value }}</div>
                    <div class="stat-title">{{ stat.title }}</div>
                    <div class="stat-trend" :class="stat.trendClass">
                        <el-icon>
                            <component :is="stat.trendIcon" />
                        </el-icon>
                        {{ stat.trend }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content ink-painting-container">
            <!-- 工单列表 -->
            <div class="content-section ink-painting-section">
                <div class="section-header">
                    <h3>工单列表</h3>
                    <div class="section-actions">
                        <el-input v-model="orderSearchText" placeholder="搜索工单..."
                            style="width: 200px; margin-right: 10px;" clearable>
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                        <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px; margin-right: 10px;">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="初始化" value="初始化"></el-option>
                            <el-option label="备料中" value="备料中"></el-option>
                            <el-option label="已开工" value="已开工"></el-option>
                            <el-option label="暂停" value="暂停"></el-option>
                            <el-option label="完工" value="完工"></el-option>
                            <el-option label="结案" value="结案"></el-option>
                        </el-select>
                        <el-button @click="viewAllOrders" type="primary">查看全部</el-button>
                    </div>
                </div>
                <div class="order-table">
                    <el-table :data="filteredOrders" style="width: 100%" height="400">
                        <el-table-column prop="code" label="工单编码" width="120" />
                        <el-table-column prop="type" label="类型" width="100">
                            <template #default="scope">
                                <el-tag :type="getTypeType(scope.row.type)">
                                    {{ scope.row.type }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="100">
                            <template #default="scope">
                                <el-tag :type="getStatusType(scope.row.status)">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="qty" label="计划数量" width="100" />
                        <el-table-column prop="completedQty" label="已完成" width="100" />
                        <el-table-column prop="okQty" label="良品数" width="100" />
                        <el-table-column prop="scrapedQty" label="报废数" width="100" />
                        <el-table-column label="完成率" width="100">
                            <template #default="scope">
                                <el-progress :percentage="getCompletionRate(scope.row)"
                                    :color="getProgressColor(getCompletionRate(scope.row))" :show-text="false" />
                                <span style="margin-left: 8px;">{{ getCompletionRate(scope.row) }}%</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="planDateS" label="计划开始" width="120">
                            <template #default="scope">
                                {{ formatDate(scope.row.planDateS) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="planDateE" label="计划完成" width="120">
                            <template #default="scope">
                                {{ formatDate(scope.row.planDateE) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="actualDateS" label="实际开始" width="120">
                            <template #default="scope">
                                {{ formatDate(scope.row.actualDateS) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="actualDateE" label="实际完成" width="120">
                            <template #default="scope">
                                {{ formatDate(scope.row.actualDateE) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" />
                        
                    </el-table>
                </div>
            </div>

            <!-- 库存状态 -->
            <div class="content-section ink-painting-section">
                <div class="section-header">
                    <h3>库存状态</h3>
                    <div class="section-actions">
                        <el-input v-model="materialSearchText" placeholder="搜索物料..."
                            style="width: 200px; margin-right: 10px;" clearable>
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                        <el-button @click="viewAllMaterials" type="primary">查看全部</el-button>
                    </div>
                </div>
                <div class="material-grid ink-painting-grid">
                    <div v-for="material in filteredMaterials" :key="material.id" class="material-card ink-painting-item"
                        :class="getMaterialCardClass(material.mateialSum)">
                        <div class="material-header">
                            <div class="material-name">{{ material.materialName }}</div>
                            <div class="material-status" :class="getMaterialStatusClass(material.mateialSum)">
                                {{ getMaterialStatus(material.mateialSum) }}
                            </div>
                        </div>
                        <div class="material-details">
                            <div class="detail-row">
                                <span class="label">编码:</span>
                                <span class="value">{{ material.mateialCode }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="label">类型:</span>
                                <span class="value">{{ material.mateialType }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="label">来源:</span>
                                <span class="value">{{ material.mateialSource }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="label">库存:</span>
                                <span class="value stock-count" :class="getStockCountClass(material.mateialSum)">
                                    {{ material.mateialSum }} {{ material.mateialUnit }}
                                </span>
                            </div>
                            <div class="detail-row">
                                <span class="label">位置:</span>
                                <span class="value">{{ material.mateialAddress }}</span>
                            </div>
                        </div>
                        <!-- <div class="material-actions">
                            <el-button size="small" :type="getActionButtonType(material.mateialSum)"
                                @click="handleMaterialAction(material)">
                                {{ getActionButtonText(material.mateialSum) }}
                            </el-button>
                        </div> -->
                    </div>
                </div>
            </div>

            <!-- 车间产线状态 -->
            <div class="content-section ink-painting-section">
                <div class="section-header">
                    <h3>车间产线状态</h3>
                    
                </div>
                <div class="workshop-grid ink-painting-grid">
                    <div v-for="workshop in workshops" :key="workshop.id" class="workshop-card ink-painting-item">
                        <div class="workshop-header">
                            <div class="workshop-name">{{ workshop.wsName }}</div>
                            <div class="workshop-code">{{ workshop.wsCode }}</div>
                        </div>
                        <div class="workshop-description">{{ workshop.wsMsg }}</div>
                        <div class="workshop-lines">
                            <div class="lines-title">产线列表:</div>
                            <div class="lines-list">
                                <div v-for="line in getWorkshopLines(workshop.id)" :key="line.id" class="line-item">
                                    <span class="line-name">{{ line.lineName }}</span>
                                    <el-tag :type="getLineStatusType(line.lineMsg)" size="small">
                                        {{ getLineStatus(line.lineMsg) }}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
    Refresh,
    Download,
    Search,
    Document,
    CircleCheck,
    Goods,
    Warning,
    ArrowUp,
    ArrowDown
} from '@element-plus/icons-vue'
import Maxios from '@/Http/MesHelp'

// 类型定义
interface MaterialItem {
    id: number
    materialName: string
    mateialCode: string
    mateialType: string
    mateialSource: string
    mateialSum: number
    mateialUnit: string
    mateialAddress: string
    status: string
    alertLevel: string
    lastUpdateTime: string
}

interface OrderItem {
    id: number
    code: string
    type: string
    status: string
    qty: number
    completedQty: number
    okQty: number
    scrapedQty: number
    planDateS: string
    planDateE: string
    actualDateS: string
    actualDateE: string
    remark: string
}

interface WorkshopItem {
    id: number
    wsName: string
    wsCode: string
    wsMsg: string
    status: string
    lastUpdateTime: string
}

interface LineItem {
    id: number
    lineName: string
    lineCode: string
    lineMsg: string
    wsId: number
    status: string
    lastUpdateTime: string
}

// 响应式数据
const loading = ref(false)
const orderSearchText = ref('')
const statusFilter = ref('')
const materialSearchText = ref('')

// 工单统计数据
const orderStats = reactive([
    {
        title: '总工单数',
        value: '0',
        icon: 'Document',
        iconClass: 'stat-icon-primary',
        trend: '0%',
        trendClass: 'trend-up',
        trendIcon: 'ArrowUp'
    },
    {
        title: '已开工单',
        value: '0',
        icon: 'Loading',
        iconClass: 'stat-icon-warning',
        trend: '0%',
        trendClass: 'trend-up',
        trendIcon: 'ArrowUp'
    },
    {
        title: '完工工单',
        value: '0',
        icon: 'CircleCheck',
        iconClass: 'stat-icon-success',
        trend: '0%',
        trendClass: 'trend-up',
        trendIcon: 'ArrowUp'
    },
    {
        title: '良品总数',
        value: '0',
        icon: 'Goods',
        iconClass: 'stat-icon-info',
        trend: '0%',
        trendClass: 'trend-up',
        trendIcon: 'ArrowUp'
    }
])

// 数据存储
const orders = ref<OrderItem[]>([])
const materials = ref<MaterialItem[]>([])
const workshops = ref<WorkshopItem[]>([])
const lines = ref<LineItem[]>([])

// 计算属性
const filteredOrders = computed(() => {
    let result = orders.value

    if (orderSearchText.value) {
        result = result.filter(order =>
            order.code.toLowerCase().includes(orderSearchText.value.toLowerCase()) ||
            order.type.toLowerCase().includes(orderSearchText.value.toLowerCase())
        )
    }

    if (statusFilter.value) {
        result = result.filter(order => order.status === statusFilter.value)
    }

    return result
})

const filteredMaterials = computed(() => {
    if (!materialSearchText.value) return materials.value

    return materials.value.filter(material =>
        material.materialName.toLowerCase().includes(materialSearchText.value.toLowerCase()) ||
        material.mateialCode.toLowerCase().includes(materialSearchText.value.toLowerCase())
    )
})

// 方法
const refreshData = async () => {
    loading.value = true
    try {
        await Promise.all([
            loadOrders(),
            loadMaterials(),
            loadWorkshops(),
            loadLines()
        ])
        // 使用当前工单数据更新统计
        updateOrderStats(orders.value || [])
        ElMessage.success('数据刷新成功')
    } catch (error) {
        ElMessage.error('数据刷新失败')
        console.error('刷新数据失败:', error)
    } finally {
        loading.value = false
    }
}

const loadOrders = async () => {
    try {
        // 传递分页参数获取工单数据
        const response = await Maxios.get('/api/Process/GetProduct', {
            params: {
                PageIndex: 1,
                PageSize: 100, // 获取更多数据用于看板显示
                Code: '',
                Type: '',
                Status: '',
                CustomerName: '',
                From: ''
            }
        })
        if (response.data.code === 200) {
            orders.value = response.data.data.list || []
            // 更新统计数据
            updateOrderStats(response.data.data.list || [])
        } else {
            console.error('工单数据加载失败:', response.data.message)
            ElMessage.error('工单数据加载失败: ' + response.data.message)
        }
    } catch (error) {
        console.error('加载工单数据失败:', error)
        ElMessage.error('加载工单数据失败: ' + (error as Error).message)
        orders.value = []
    }
}

const loadMaterials = async () => {
    try {
        const response = await Maxios.get('/api/ProductionDashboard/GetMaterialInventory')
        if (response.data.code === 200) {
            materials.value = response.data.data || []
        } else {
            console.error('物料数据加载失败:', response.data.message)
            ElMessage.error('物料数据加载失败: ' + response.data.message)
        }
    } catch (error) {
        console.error('加载物料数据失败:', error)
        ElMessage.error('加载物料数据失败: ' + (error as Error).message)
        materials.value = []
    }
}

const loadWorkshops = async () => {
    try {
        const response = await Maxios.get('/api/ProductionDashboard/GetWorkshopStatus')
        if (response.data.code === 200) {
            workshops.value = response.data.data || []
        } else {
            console.error('车间数据加载失败:', response.data.message)
            ElMessage.error('车间数据加载失败: ' + response.data.message)
        }
    } catch (error) {
        console.error('加载车间数据失败:', error)
        ElMessage.error('加载车间数据失败: ' + (error as Error).message)
        workshops.value = []
    }
}

const loadLines = async () => {
    try {
        const response = await Maxios.get('/api/ProductionDashboard/GetProductionLines')
        if (response.data.code === 200) {
            lines.value = response.data.data || []
        } else {
            console.error('产线数据加载失败:', response.data.message)
            ElMessage.error('产线数据加载失败: ' + response.data.message)
        }
    } catch (error) {
        console.error('加载产线数据失败:', error)
        ElMessage.error('加载产线数据失败: ' + (error as Error).message)
        lines.value = []
    }
}

const updateOrderStats = (orderList: OrderItem[]) => {
    const totalOrders = orderList.length
    const inProgressOrders = orderList.filter(o => o.status === '已开工').length
    const completedOrders = orderList.filter(o => o.status === '完工').length
    const totalGoodProducts = orderList.reduce((sum, o) => sum + (o.okQty || 0), 0)

    orderStats[0].value = totalOrders.toString()
    orderStats[1].value = inProgressOrders.toString()
    orderStats[2].value = completedOrders.toString()
    orderStats[3].value = totalGoodProducts.toString()
}

// 工具方法
const getTypeType = (type: string) => {
    switch (type) {
        case '自建工单': return 'primary'
        case '正常': return 'success'
        case '维修': return 'warning'
        case '委外': return 'info'
        case '紧急': return 'danger'
        case '返工': return 'warning'
        default: return 'info'
    }
}

const getStatusType = (status: string) => {
    switch (status) {
        case '完工': return 'success'
        case '已开工': return 'warning'
        case '初始化': return 'primary'
        case '备料中': return 'info'
        case '暂停': return 'danger'
        case '结案': return 'info'
        default: return 'info'
    }
}

const getCompletionRate = (order: OrderItem) => {
    if (!order.qty || order.qty === 0) return 0
    return Math.round((order.completedQty / order.qty) * 100)
}

const getProgressColor = (percentage: number) => {
    if (percentage >= 80) return '#67c23a'
    if (percentage >= 60) return '#e6a23c'
    return '#f56c6c'
}

const formatDate = (date: string | Date) => {
    if (!date) return '-'
    return new Date(date).toLocaleDateString()
}

const getMaterialStatus = (stock: number) => {
    if (stock <= 10) return '严重不足'
    if (stock <= 50) return '库存不足'
    if (stock <= 100) return '库存偏低'
    if (stock <= 200) return '库存正常'
    return '库存充足'
}

const getMaterialStatusClass = (stock: number) => {
    if (stock <= 10) return 'status-danger'
    if (stock <= 50) return 'status-warning'
    if (stock <= 100) return 'status-info'
    return 'status-success'
}

const getMaterialCardClass = (stock: number) => {
    if (stock <= 10) return 'material-card-danger'
    if (stock <= 50) return 'material-card-warning'
    if (stock <= 100) return 'material-card-info'
    return 'material-card-success'
}

const getStockCountClass = (stock: number) => {
    if (stock <= 10) return 'stock-danger'
    if (stock <= 50) return 'stock-warning'
    if (stock <= 100) return 'stock-info'
    return 'stock-success'
}

const getActionButtonType = (stock: number) => {
    if (stock <= 10) return 'danger'
    if (stock <= 50) return 'warning'
    if (stock <= 100) return 'primary'
    return 'success'
}

const getActionButtonText = (stock: number) => {
    if (stock <= 10) return '紧急补货'
    if (stock <= 50) return '补充库存'
    if (stock <= 100) return '查看详情'
    return '库存充足'
}

const getWorkshopLines = (workshopId: number) => {
    return lines.value.filter(line => line.wsId === workshopId)
}

const getLineStatus = (lineMsg: string) => {
    if (!lineMsg) return '正常'
    if (lineMsg.includes('故障') || lineMsg.includes('异常')) return '故障'
    if (lineMsg.includes('维护') || lineMsg.includes('保养')) return '维护'
    if (lineMsg.includes('停机') || lineMsg.includes('停止')) return '停机'
    return '正常'
}

const getLineStatusType = (lineMsg: string) => {
    const status = getLineStatus(lineMsg)
    switch (status) {
        case '正常': return 'success'
        case '维护': return 'warning'
        case '故障': return 'danger'
        case '停机': return 'info'
        default: return 'info'
    }
}

// 事件处理
const viewOrderDetail = (order: OrderItem) => {
    ElMessage.info(`查看工单详情: ${order.code}`)
}

const handleMaterialAction = (material: MaterialItem) => {
    const action = getActionButtonText(material.mateialSum)
    ElMessage.success(`执行操作: ${action} - ${material.materialName}`)
}

const viewAllOrders = () => {
    ElMessage.info('跳转到工单管理页面')
}

const viewAllMaterials = () => {
    ElMessage.info('跳转到物料管理页面')
}

const refreshWorkshopData = () => {
    ElMessage.success('车间产线状态已刷新')
}

const exportData = () => {
    ElMessage.success('数据导出功能开发中...')
}

const testData = async () => {
    try {
        const response = await Maxios.get('/api/ProductionDashboard/TestOrderData')
        if (response.data.code === 200) {
            const data = response.data.data
            ElMessage.success(`数据状态: 工单${data.totalOrders}个, 物料${data.materialsCount}个, 车间${data.workshopsCount}个, 产线${data.linesCount}个`)
            console.log('测试数据:', data)
        } else {
            ElMessage.error('测试数据失败: ' + response.data.message)
        }
    } catch (error) {
        ElMessage.error('测试数据失败: ' + (error as Error).message)
        console.error('测试数据失败:', error)
    }
}

// 生命周期
onMounted(() => {
    refreshData()
})
</script>

<style scoped>
/* 水墨画风格样式 */
.production-dashboard {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
    min-height: 100vh;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.dashboard-header h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
    position: relative;
    overflow: hidden;
}

.stat-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 50%;
}

.stat-icon-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-icon-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-icon-success {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.stat-icon-info {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-title {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-trend {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.trend-up {
    color: #27ae60;
}

.trend-down {
    color: #e74c3c;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.content-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.section-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-table {
    overflow-x: auto;
}

.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.material-card {
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.material-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-radius: 12px;
    z-index: -1;
}

.material-card-danger {
    border-left: 4px solid #e74c3c;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.2);
}

.material-card-warning {
    border-left: 4px solid #f39c12;
    box-shadow: 0 4px 20px rgba(243, 156, 18, 0.2);
}

.material-card-info {
    border-left: 4px solid #3498db;
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.2);
}

.material-card-success {
    border-left: 4px solid #27ae60;
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.2);
}

.material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.material-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.material-status {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.status-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}

.status-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
}

.status-info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
}

.status-success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: white;
}

.material-details {
    margin-bottom: 16px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.detail-row .label {
    color: #7f8c8d;
    font-weight: 500;
}

.detail-row .value {
    color: #2c3e50;
    font-weight: 600;
}

.stock-count {
    font-size: 18px;
    font-weight: 700;
}

.stock-danger {
    color: #e74c3c;
}

.stock-warning {
    color: #f39c12;
}

.stock-info {
    color: #3498db;
}

.stock-success {
    color: #27ae60;
}

.material-actions {
    text-align: right;
}

.workshop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

.workshop-card {
    border-radius: 12px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.workshop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.workshop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.workshop-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.workshop-code {
    font-size: 12px;
    color: #7f8c8d;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.workshop-description {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 16px;
    line-height: 1.5;
}

.lines-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lines-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.line-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.line-item:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.line-name {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-button) {
    border-radius: 8px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

:deep(.el-button--primary) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

:deep(.el-button--primary:hover) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

:deep(.el-input__inner) {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

:deep(.el-table) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

:deep(.el-table th) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:deep(.el-table td) {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

:deep(.el-tag) {
    border-radius: 20px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:deep(.el-progress-bar__outer) {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}

:deep(.el-progress-bar__inner) {
    border-radius: 10px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

/* 水墨画风格容器样式 */
.ink-painting-container {
    position: relative;
    overflow: hidden;
}

.ink-painting-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(118, 75, 162, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(240, 147, 251, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(245, 87, 108, 0.03) 0%, transparent 50%);
    animation: inkFlow 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.ink-painting-section {
    position: relative;
    overflow: hidden;
}

.ink-painting-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, rgba(102, 126, 234, 0.02) 0%, transparent 50%),
        linear-gradient(-45deg, rgba(118, 75, 162, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.ink-painting-grid {
    position: relative;
}

.ink-painting-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(79, 172, 254, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(0, 242, 254, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.ink-painting-item {
    position: relative;
    overflow: hidden;
}

.ink-painting-item::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: 
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.ink-painting-item:hover::before {
    opacity: 1;
}

.ink-painting-card {
    position: relative;
    overflow: hidden;
}

.ink-painting-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    pointer-events: none;
    z-index: -1;
}

/* 水墨流动动画 */
@keyframes inkFlow {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translate(20px, -10px) rotate(1deg);
        opacity: 0.5;
    }
    50% {
        transform: translate(-10px, 20px) rotate(-1deg);
        opacity: 0.4;
    }
    75% {
        transform: translate(15px, 10px) rotate(0.5deg);
        opacity: 0.6;
    }
}

/* 增强现有样式的水墨效果 */
.stats-cards.ink-painting-container {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%),
        radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
}

.main-content.ink-painting-container {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%),
        radial-gradient(circle at 40% 60%, rgba(79, 172, 254, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 60% 40%, rgba(0, 242, 254, 0.06) 0%, transparent 60%);
    border-radius: 24px;
    padding: 24px;
}

.content-section.ink-painting-section {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%),
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(118, 75, 162, 0.04) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 0 1px rgba(102, 126, 234, 0.05);
}

.material-grid.ink-painting-grid,
.workshop-grid.ink-painting-grid {
    background: 
        radial-gradient(circle at 50% 50%, rgba(79, 172, 254, 0.02) 0%, transparent 70%);
    border-radius: 16px;
    padding: 16px;
}

.material-card.ink-painting-item,
.workshop-card.ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 0 1px rgba(102, 126, 234, 0.05);
}

.stat-card.ink-painting-card {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.04) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 0 1px rgba(102, 126, 234, 0.05);
}

/* 为不同统计卡片添加不同的水墨色彩 */
.stat-card:nth-child(1).ink-painting-card {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(118, 75, 162, 0.04) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.15);
}

.stat-card:nth-child(2).ink-painting-card {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 25% 25%, rgba(240, 147, 251, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(245, 87, 108, 0.04) 0%, transparent 50%);
    border: 1px solid rgba(240, 147, 251, 0.15);
}

.stat-card:nth-child(3).ink-painting-card {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 40% 40%, rgba(79, 172, 254, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(0, 242, 254, 0.04) 0%, transparent 50%);
    border: 1px solid rgba(79, 172, 254, 0.15);
}

.stat-card:nth-child(4).ink-painting-card {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 35% 35%, rgba(67, 233, 123, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 65% 65%, rgba(56, 249, 215, 0.04) 0%, transparent 50%);
    border: 1px solid rgba(67, 233, 123, 0.15);
}

/* 为不同物料卡片添加不同的水墨色彩 */
.material-card:nth-child(odd).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(118, 75, 162, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.12);
}

.material-card:nth-child(even).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 40% 40%, rgba(79, 172, 254, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 60% 60%, rgba(0, 242, 254, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(79, 172, 254, 0.12);
}

.material-card:nth-child(3n).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 35% 35%, rgba(240, 147, 251, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 65% 65%, rgba(245, 87, 108, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(240, 147, 251, 0.12);
}

.material-card:nth-child(4n).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 25% 25%, rgba(67, 233, 123, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(56, 249, 215, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(67, 233, 123, 0.12);
}

.material-card:nth-child(5n).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 45% 45%, rgba(255, 193, 7, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 55% 55%, rgba(255, 152, 0, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(255, 193, 7, 0.12);
}

/* 为不同车间卡片添加不同的水墨色彩 */
.workshop-card:nth-child(odd).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(118, 75, 162, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.12);
}

.workshop-card:nth-child(even).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 40% 40%, rgba(79, 172, 254, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 60% 60%, rgba(0, 242, 254, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(79, 172, 254, 0.12);
}

.workshop-card:nth-child(3n).ink-painting-item {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 35% 35%, rgba(240, 147, 251, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 65% 65%, rgba(245, 87, 108, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(240, 147, 251, 0.12);
}

/* 为表格行添加交替的水墨色彩 */
:deep(.el-table tbody tr:nth-child(odd)) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
        radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.02) 0%, transparent 50%);
}

:deep(.el-table tbody tr:nth-child(even)) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
        radial-gradient(circle at 80% 80%, rgba(79, 172, 254, 0.02) 0%, transparent 50%);
}

:deep(.el-table tbody tr:nth-child(3n)) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
        radial-gradient(circle at 50% 50%, rgba(240, 147, 251, 0.02) 0%, transparent 50%);
}

/* 自定义标签颜色，使字体更清晰 */
:deep(.el-tag.el-tag--primary) {
    background: linear-gradient(135deg, #409eff 0%, #337ecc 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

:deep(.el-tag.el-tag--success) {
    background: linear-gradient(135deg, #67c23a 0%, #529b2e 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

:deep(.el-tag.el-tag--warning) {
    background: linear-gradient(135deg, #e6a23c 0%, #b88230 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

:deep(.el-tag.el-tag--info) {
    background: linear-gradient(135deg, #909399 0%, #73767a 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

:deep(.el-tag.el-tag--danger) {
    background: linear-gradient(135deg, #f56c6c 0%, #c45656 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

/* 为输入框添加水墨色彩 */
:deep(.el-input__inner) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%),
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

:deep(.el-input__inner:focus) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 
        0 4px 12px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 为选择框添加水墨色彩 */
:deep(.el-select .el-input__inner) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%),
        radial-gradient(circle at 40% 40%, rgba(79, 172, 254, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(79, 172, 254, 0.2);
}

/* 为标签添加水墨色彩 */
:deep(.el-tag--primary) {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

:deep(.el-tag--success) {
    background: 
        linear-gradient(135deg, rgba(67, 233, 123, 0.9) 0%, rgba(56, 249, 215, 0.9) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border: 1px solid rgba(67, 233, 123, 0.3);
    box-shadow: 0 2px 8px rgba(67, 233, 123, 0.2);
}

:deep(.el-tag--warning) {
    background: 
        linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 152, 0, 0.9) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

:deep(.el-tag--danger) {
    background: 
        linear-gradient(135deg, rgba(240, 147, 251, 0.9) 0%, rgba(245, 87, 108, 0.9) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border: 1px solid rgba(240, 147, 251, 0.3);
    box-shadow: 0 2px 8px rgba(240, 147, 251, 0.2);
}

:deep(.el-tag--info) {
    background: 
        linear-gradient(135deg, rgba(79, 172, 254, 0.9) 0%, rgba(0, 242, 254, 0.9) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border: 1px solid rgba(79, 172, 254, 0.3);
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);
}

/* 为进度条添加水墨色彩 */
:deep(.el-progress-bar__outer) {
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

:deep(.el-progress-bar__inner) {
    background: 
        linear-gradient(90deg, 
            rgba(102, 126, 234, 0.8) 0%, 
            rgba(118, 75, 162, 0.8) 25%,
            rgba(79, 172, 254, 0.8) 50%,
            rgba(0, 242, 254, 0.8) 75%,
            rgba(67, 233, 123, 0.8) 100%
        ),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    box-shadow: 
        0 2px 8px rgba(102, 126, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 为按钮添加更多水墨色彩变化 */
:deep(.el-button--primary) {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 
        0 4px 15px rgba(102, 126, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

:deep(.el-button--primary:hover) {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    box-shadow: 
        0 6px 20px rgba(102, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 为下拉菜单添加水墨色彩 */
:deep(.el-select-dropdown) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%),
        radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(79, 172, 254, 0.03) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

:deep(.el-select-dropdown .el-select-dropdown__item) {
    background: transparent;
    transition: all 0.2s ease;
}

:deep(.el-select-dropdown .el-select-dropdown__item:hover) {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

/* 为分页组件添加水墨色彩 */
:deep(.el-pagination) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.02) 0%, transparent 60%);
    border-radius: 12px;
    padding: 8px;
}

:deep(.el-pagination .el-pager li) {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%),
        radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.03) 0%, transparent 60%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    margin: 0 2px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

:deep(.el-pagination .el-pager li:hover) {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

:deep(.el-pagination .el-pager li.is-active) {
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: white;
}
</style>
